<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>图书购物车</title>
        <link rel="stylesheet" href="../css/cart.css">
    </head>
    <body>
        <div id="cart">
            <table v-if="books.length">
                <thead>
                    <th></th>
                    <th>书籍名称</th>
                    <th>出版名称</th>
                    <th>价格</th>
                    <th>购买数量</th>
                    <th>操作</th>
                </thead>
                <tbody>
                    <tr v-for="(book, index) in books" :key="book.name">
                        <td>{{index + 1}}</td>
                        <td>{{book.name}}</td>
                        <td>{{book.date}}</td>
                        <td>{{book.price | showPrice}}</td>
                        <td>
                            <button type="button" name="decrement" :disabled='book.count <= 1' @click="decrement(index)">-</button>
                            {{book.count}}
                            <button type="button" name="increment" @click="increment(index)">+</button>
                        </td>
                        <td>
                            <button type="button" name="remove" @click="remove(index)">移除</button>
                        </td>
                    </tr>
                </tbody>
            </table>
            <span v-if="books.length">总价：{{totalPrice | showPrice}}</span>
            <h2 v-else>当前购物车为空</h2>
        </div>
    </body>
    <script src="../js/vue.js" charset="utf-8"></script>
    <script src="../js/book-cart.js" charset="utf-8"></script>
</html>
